<template>
	<view>
		<view class="change-wrap">
			<u-cell-group>
				<u-cell-item title="原密码" :title-style="cellTitleSty" :arrow="false" hover-class="none">
					<view slot="right-icon" class="cell-input-wrap">
						<u-input v-model="oldPassword" input-align="right" :placeholder="userinfo.hasDefaultPassword == 1 ? '默认初始密码：888888' : '请输入'" :maxlength="20" type="password" :password-icon="false" trim></u-input>
					</view>
				</u-cell-item>
				<u-cell-item title="新密码" :title-style="cellTitleSty" :arrow="false" hover-class="none">
					<view slot="right-icon" class="cell-input-wrap">
						<u-input v-model="newPassword" input-align="right" placeholder="请输入" :maxlength="20" type="password" :password-icon="false" trim></u-input>
					</view>
				</u-cell-item>
				<u-cell-item title="确认密码" :title-style="cellTitleSty" :arrow="false" hover-class="none">
					<view slot="right-icon" class="cell-input-wrap">
						<u-input v-model="repeatPassword" input-align="right" placeholder="请输入" :maxlength="20" type="password" :password-icon="false" trim></u-input>
					</view>
				</u-cell-item>
			</u-cell-group>
		</view>
		<view class="submit-wrap"><button class="u-reset-button submit-btn" @click="submitChange" :loading="submitLoading">确认修改</button></view>
	</view>
</template>

<script>
import { apiChangePassword } from '@/api/user.js';
const passwordMinLen = 6;
const passwordMaxLen = 20;
export default {
	data() {
		return {
			cellTitleSty: {
				fontSize: '30rpx',
				color: '#666'
			},
			oldPassword: '',
			newPassword: '',
			repeatPassword: '',
			submitLoading: false
		};
	},
	computed: {
		userinfo() {
			return this.$store.state.userInfo;
		}
	},
	methods: {
		submitChange() {
			if (this.submitLoading) {
				return;
			}
			let oldPLen = this.oldPassword.length;
			let newPLen = this.newPassword.length;
			let repeatPLen = this.repeatPassword.length;
			if (oldPLen < passwordMinLen || oldPLen > passwordMaxLen) {
				this.$am_toast('原密码格式不正确');
				return;
			} else if (newPLen < passwordMinLen || newPLen > passwordMaxLen) {
				this.$am_toast('新密码格式不正确');
				return;
			} else if (repeatPLen < passwordMinLen || repeatPLen > passwordMaxLen) {
				this.$am_toast('确认密码格式不正确');
				return;
			} else if (this.newPassword !== this.repeatPassword) {
				this.$am_toast('确认密码不一致，请重新输入');
				return;
			}
			this.submitLoading = true;
			apiChangePassword({ confirmPass: this.repeatPassword, newPass: this.newPassword, oldPass: this.oldPassword })
				.then(res => {
					let { state, msg } = res.data;
					if (state === 'OK') {
						// this.$store.commit('LOGIN_OUT');
						this.$am_toast('修改成功！');
						uni.reLaunch({
							url: '/pages/mine/mine'
						});
					} else {
						this.$am_toast.warning(msg);
					}
					this.submitLoading = false;
				})
				.catch(() => {
					this.submitLoading = false;
					this.$am_toast.error('操作失败，请重新尝试！');
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.change-wrap {
	padding-top: 16rpx;
}
.cell-input-wrap {
	width: 450rpx;
}
.submit-wrap {
	margin-top: 456rpx;
}
.submit-btn {
	width: 690rpx;
	height: 80rpx;
	font-size: 34rpx;
	font-weight: 500;
	color: #ffffff;
	line-height: 80rpx;
	text-align: center;
	background: linear-gradient(129deg, #F79128 0%, #FE6507 100%);
	border-radius: 40rpx;
}
</style>
